ESLint vs Prettier
功能定位
| 工具 | 定位 | 检查内容 |
|---|---|---|
| ESLint | 代码质量检查 | 语法错误、最佳实践、潜在问题 |
| Prettier | 代码格式化 | 缩进、换行、引号、分号等格式 |
两者配合使用
ESLint和Prettier不是替代关系，而是互补关系。ESLint关注代码逻辑，Prettier关注代码格式。
配置最佳实践
ESLint配置（eslint.config.js）：
import vue from 'eslint-plugin-vue'
import typescript from '@typescript-eslint/eslint-plugin'
import prettier from 'eslint-config-prettier'
export default [
...vue.configs['flat/recommended'],
{
rules: {
'vue/multi-word-component-names': 'off',
'@typescript-eslint/no-explicit-any': 'warn',
}
},
prettier // 关闭与Prettier冲突的ESLint规则
]
javascript
Prettier配置（.prettierrc）：
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 100
}
json
Husky + lint-staged自动检查
# 安装
pnpm add -D husky lint-staged
# 初始化Husky
pnpm exec husky init
bash
// package.json
{
"lint-staged": {
"*.{js,ts,vue}": ["eslint --fix", "prettier --write"],
"*.{css,scss,html}": ["prettier --write"]
}
}
json
这样每次git commit时会自动检查和格式化暂存区的文件，确保提交到仓库的代码符合规范。
↑